<template>
  <view class="page-container">
     <custom-tab-bar/>
    <!-- 顶部用户信息区 -->
    <view class="header">
      <image class="avatar" :src="avatarUrl" mode="widthFix" @click="gotouser"></image>
      <view class="user-info">
        <text class="nickname" @click="gotouser">{{ nickname }}</text>
      </view>
      <button class="resume-btn" @click="viewOnlineResume">在线简历</button>
    </view>

    <!-- 统计数据区域 - 替代原功能导航栏 -->
    <view class="stats-container">
      <view class="stat-item">
        <text class="stat-num">{{ deliveryCount }}</text>
        <text class="stat-text">投递</text>
      </view>
      <view class="stat-item">
        <text class="stat-num">{{ interviewCount }}</text>
        <text class="stat-text">面试</text>
      </view>
      <view class="stat-item">
        <text class="stat-num">{{ collectCount }}</text>
        <text class="stat-text">收藏</text>
      </view>
    </view>

    <!-- 标签栏 (使用uview的u-tabs) -->
    <u-tabs :list="tabList" @click="switchTab" :current="currentTab" active-color="#0084ff" inactive-color="#86909c" :is-scroll="false"></u-tabs>

    <!-- 内容列表（根据标签动态切换） -->
    <view class="content">
      <!-- 1. 求职进度 -->
      <view v-if="currentTab === 0">
        <plan></plan>
      </view>

      <!-- 2. 职位收藏 -->
      <view v-if="currentTab === 1">
        <favorites></favorites>
      </view>

      <!-- 3. 职位邀请与投递 -->
      <view v-if="currentTab === 2">
        <invite></invite>
      </view>

      <!-- 4. 职位浏览记录 -->
      <view v-if="currentTab === 3">
        <records></records>
      </view>

      <!-- 5. 附件简历 -->
      <view v-if="currentTab === 4">
        <resume></resume>
      </view>
    </view>
  </view>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
import favorites from "./component/favorites.vue"; // 收藏
import plan from "./component/plan.vue"; // 求职进度
import records from "./component/records.vue"; // 职位浏览记录
import invite from "./component/invite.vue"; // 邀请
import resume from "./component/resume.vue"; // 附件简历

export default {
  components: {
    favorites,
    plan,
    records,
	invite,
    resume
  },
  data() {
    return {
      deliveryCount: 12,
      interviewCount: 3,
      collectCount: 8,

      // 标签栏 (使用uview的格式)
      tabList: [
        { name: "求职进度" },
        { name: "职位收藏" },
        { name: "职位邀请投递" },
        { name: "职位浏览记录" },
        { name: "附件简历" }
      ],
      currentTab: 0,
    };
  },
  computed: {
    ...mapGetters(['userInfo']),
    avatarUrl() {
      return this.userInfo?.avatar;
    },
    nickname() {
      return this.userInfo?.name || '未登录';
    },
  },
  onLoad() {
    this.queryUserInfo();
  },
  methods: {
    ...mapActions(['queryUserInfo']),

    // 检查页面是否存在
    checkPageExists(url) {
      try {
        return true;
      } catch (e) {
        uni.showToast({ title: "功能暂未开放", icon: "none" });
        return false;
      }
    },

    // 预览简历
    previewResume() {
      uni.showToast({ title: "正在预览简历", icon: "none" });
    },

    // 管理附件
    manageAttachments() {
      uni.showToast({ title: "附件简历管理", icon: "none" });
      uni.navigateTo({
        url: "/pages/mine/resume/resume",
      });
    },

    // 退出登录确认
    confirmLogout() {
      uni.showModal({
        title: "退出登录",
        content: "确定要退出当前账号吗？",
        success: (res) => {
          if (res.confirm) {
            this.$store.dispatch('logout');
            uni.reLaunch({ url: "/pages/login/index" });
          }
        },
      });
    },

    // 切换标签
    switchTab(item) {
      // item是uview传递的对象，包含index属性
      if (this.currentTab === item.index) return;
      this.currentTab = item.index;
    },

    // 查看在线简历
    viewOnlineResume() {
      this.checkPageExists("/pages/mine/onlineResume/onlineResume") && uni.navigateTo({ url: "/pages/mine/onlineResume/onlineResume" });
    },

    // 去职位列表
    gotouser() {
      uni.navigateTo({ url: "/pages/mine/userDate/userDate" });
    },
  },
};
</script>
<style scoped>
/* 全局样式 */
.page-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 100rpx;
}

/* 顶部用户信息区 */
.header {
  display: flex;
  align-items: center;
  padding: 30rpx 24rpx;
  /* background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%); */
}
.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 24rpx;
  border: 4rpx solid #ffffff;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}
.user-info {
  flex: 1;
}
.nickname {
  font-size: 36rpx;
  font-weight: 600;
  color: #1d2129;
  display: block;
}
.resume-btn {
  background-color: #0084ff;
  color: #ffffff;
  font-size: 26rpx;
  padding: 18rpx 36rpx;
  border-radius: 60rpx;
  border: none;
  line-height: 1;
  box-shadow: 0 4rpx 10rpx rgba(0, 132, 255, 0.3);
}
.resume-btn::after {
  border: none;
}

/* 统计数据容器 */
.stats-container {
  display: flex;
  justify-content: space-around;
  padding: 0;
  background-color: #ffffff;
  margin: 20rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}
.stats-container .stat-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  position: relative;
}
/* 添加分割线 */
.stats-container .stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1rpx;
  height: 60rpx;
  background-color: #f0f0f0;
}
.stats-container .stat-num {
  font-size: 40rpx;
  color: #0084ff;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 10rpx;
  display: block;
}
.stats-container .stat-text {
  font-size: 28rpx;
  color: #4e5969;
}

/* 内容区域 */
.content {
  padding: 20rpx;
}
</style>